<!--<template>-->
<!--  <div class="hello">-->
<!--&lt;!&ndash;    {{data}}&ndash;&gt;-->
<!--    <el-carousel :interval="3000" arrow="always">-->
<!--      <el-carousel-item v-for="item in 4" :key="item">-->
<!--        <img :src="item+'.jpg'" width="1800px" height="300"/>-->
<!--      </el-carousel-item>-->
<!--    </el-carousel>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--export default {-->
<!--  name: 'HeaderComponent',-->
<!--  data() {-->
<!--    return{-->
<!--      // data: [-->
<!--      //     {id: 1, img: "../../public/img/1.jpg"},]-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->


<!--<style scoped>-->
<!--h3 {-->
<!--  margin: 40px 0 0;-->
<!--}-->
<!--ul {-->
<!--  list-style-type: none;-->
<!--  padding: 0;-->
<!--}-->
<!--li {-->
<!--  display: inline-block;-->
<!--  margin: 0 10px;-->
<!--}-->
<!--a {-->
<!--  color: #42b983;-->
<!--}-->
<!--.el-carousel__item h3 {-->
<!--  color: #475669;-->
<!--  font-size: 18px;-->
<!--  opacity: 0.75;-->
<!--  line-height: 300px;-->
<!--  margin: 0;-->
<!--}-->

<!--.el-carousel__item:nth-child(2n) {-->
<!--  background-color: #99a9bf;-->
<!--}-->

<!--.el-carousel__item:nth-child(2n+1) {-->
<!--  background-color: #d3dce6;-->
<!--}-->
<!--.hello{-->
<!--  width: 100%;-->
<!--}-->
<!--</style>-->


<template>
  <div class="hello">
    <div class="carousel-container">
      <el-carousel :interval="3000" arrow="always">
        <el-carousel-item v-for="item in 4" :key="item">
          <img :src="item+'.jpg'" alt="轮播图" class="carousel-img">
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HeaderComponent',
  data() {
    return{
      // data: [
      //     {id: 1, img: "../../public/img/1.jpg"},]
    }
  }
}
</script>

<style scoped>
h3 {
  margin: 2.5rem 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 0.625rem;
}
a {
  color: #42b983;
}

.carousel-container {
  width: 100%;
  margin: 0 auto;
}

.carousel-img {
  max-width: 100%;
  height: auto;
  display: block;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 1.125rem;
  opacity: 0.75;
  line-height: 18.75rem;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.hello{
  width: 100%;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .carousel-container {
    max-width: 960px;
  }
}

@media (max-width: 992px) {
  .carousel-container {
    max-width: 720px;
  }
}

@media (max-width: 768px) {
  .carousel-container {
    max-width: 540px;
  }
}

@media (max-width: 576px) {
  .carousel-container {
    max-width: 100%;
    padding: 0 15px;
  }
}
</style>